<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            cursor: pointer;
        }
        .aa{
            color: #885F40;
            padding: 0 15px;
            font-size: 14px;
        }
        .bb{
            color: #ED6D38;
            font-size: 12px;
            text-decoration: none;
        }
        .bb:hover{
            text-decoration: underline;

        }
       /* .img { transition: All 0.4s ease-in-out;
            -webkit-transition: All 0.4s ease-in-out;
            -moz-transition: All 0.4s ease-in-out;
            -o-transition: All 0.4s ease-in-out; }
        .img:hover { transform: scale(1.2);
            -webkit-transform: scale(1.2);
            -moz-transform: scale(1.2);
            -o-transform: scale(1.2);
            -ms-transform: scale(1.2);
            
            }*/

        /*---------------------------头部结束------------------------------------------*/
        .map{
            width: 100%;
            height: 100%;
            background: radial-gradient(#FFAB00,#FFAB00);
            background-repeat: no-repeat;
        }
        .mg{
            width: 1200px;
            height: 760px;
            margin-left: 150px;
        }
        img{
            width: 100%;
        }
    </style>
</head>
<body>
<div id="#app">
  <!-----------------------------头部开始-------------------------------------------->
    <el-header>
    <div style="width: 1100px;height: 80px;margin:0 auto;padding-top: 23px;">
        <img style="vertical-align: middle;width: 134px;height: 34px;" src="images/redbage/logo.png">
        <el-menu style="padding: 20px">
            <el-menu-item class="aa">首页</el-menu-item>
            <el-menu-item class="aa">蛋糕</el-menu-item>
            <el-menu-item class="aa">面包</el-menu-item>
            <el-menu-item class="aa">套餐</el-menu-item>
            <el-menu-item class="aa">鲜花</el-menu-item>
            <el-menu-item class="aa">甜品下午茶</el-menu-item>
            <el-menu-item class="aa">周边</el-menu-item>
            <el-menu-item class="aa">企业专区</el-menu-item>
            <el-menu-item class="aa">品牌故事</el-menu-item>
        </el-menu>
        <img style="width: 16px; height: 20px;" src="images/redbage/location_icon.png">
        <el-button type="text" slot="append">
            <span  style="color:#ED6D38;font-size: 14px">深圳</span>
        </el-button>
        <img style="width: 9px; height: 5px;" src="images/redbage/location_after.png" style="vertical-align: middle">

        <div style="float: right">
            <img style="width: 18px;height: 20px;" src="images/redbage/personal_icon.png">
            <a class="bb" href="">[会员中心]</a>
            <a class="bb" href="">[登录]</a>
            <a class="bb" href="">[注册]</a>
            <img style="width: 20px;height: 20px;" src="images/redbage/cart_icon.png">
            <div style="width: 195px;"></div>
        </div>

    </div>
<!--<img class="img" src="images/btn.png">-->
</el-header>
   <!----------------------------头部结束-------------------------------------------->
<div style="width: 100%;">

    <div class="map">
        <img class="mg" src="images/map.gif">
    </div>
    <div style="width: 100%;height: 100%;overflow: hidden;position: relative" v-for="a in arr">
<!--        <img :src="a.name">-->
        <img src="images/berries.jpg">
        <img src="images/berries1.jpg">
        <img src="images/durian.jpg">
        <img src="images/cream.jpg">
        <img src="images/puree.jpg">

    </div>
    <div style="width: 100%;height: 100%;overflow: hidden;position: relative" v-for="a in arr">

    </div>

</div>
</div>
<!-----------------------------页脚开始-------------------------------------------->
<footer>

</footer>
<!-----------------------------页脚结束-------------------------------------------->
</body>
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    let v = new vue({
        el:'#app',
        data: function (){
            return{
                arr:[{title:"蛋糕"},
                    {title:"面包"},
                    {title:"套餐"},
                    {title:"鲜花"},
                    {title:"甜品下午茶"},
                    {title:"周边"},
                    {title:"企业专区"},
                    {title:"品牌故事"}]
            }

        },
        methods:{

        }

    })
</script>
</html>